<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="google-site-verification"
      content="zArJNTXiV31Ctcf8DTTd9DHQxIcRv5j67mRvpyMN8VE"
    />
    <meta
      name="description"
      content="RMWC is a React UI Kit built on Google's official Material Components
      Web library."
    />
    <meta
      name="keywords"
      content="RMWC, Material, Design, Components, Web, React, material-components-web"
    />
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    />
    <link rel="manifest" href="/manifest.json" />

    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="stylesheet" href="/src/styles.css" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
    <meta name="msapplication-TileColor" content="#ffffff" />
    <meta name="theme-color" content="#ffffff" />
    <title>RMWC | React Material Web Components</title>

    <style>
      .app-loading-shim {
        position: fixed;
        top: 50%;
        left: 50%;
        font-family: sans-serif;
        font-size: 32px;
        opacity: 0.4;
        transform: translate(-50%, -50%);
        text-align: center;
        justify-content: center;
      }

      .app-loading-shim small {
        font-size: 16px;
        display: block;
        margin-top: 8px;
      }
    </style>

    <script type="text/javascript">
      if (window.location.search.indexOf('p=') !== -1) {
        const params = window.location.search
          .slice(1)
          .split('&')
          .reduce((acc, part) => {
            const [key, val] = part.split('=', 2);
            acc[key] = val;
            return acc;
          }, {});
        if (params.p) {
          window.history.replaceState(null, null, params.p);
        }
      }
    </script>
  </head>

  <body class="mdc-typography mdc-theme--background">
    <noscript> You need to enable JavaScript to run this app. </noscript>
    <div id="root">
      <div class="app-loading-shim">
        RMWC
        <small>Loading...</small>
      </div>
    </div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>
